<!DOCTYPE html>
<html lang="zh" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}我的博客{% endblock %}</title>
    <!-- 添加Google中文字体支持 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="../static/css/font-awesome.min.css">
    <style>
        /* 添加自定义字体 */
        @font-face {
            font-family: "CustomKaiFont";
            src: local("STXingkai"), local("华文行楷"), local("KaiTi"), local("楷体");
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
        
        @font-face {
            font-family: "CustomHupoFont";
            src: local("STHupo"), local("华文琥珀"), local("SimHei"), local("黑体");
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
        
        :root {
            /* 日间模式（默认） */
            --primary-color: #3498db;
            --primary-color-rgb: 52, 152, 219;
            --secondary-color: #7f8c8d;
            --accent-color: #e74c3c;
            --background-color: #f9f9f9;
            --text-color: #333;
            --navbar-bg: #fff;
            --card-bg: #fff;
            --border-color: #eee;
            --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            --placeholder-bg: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%);
            --code-bg: #f6f8fa;
            --card-highlight: #9370DB; /* 卡片悬浮时的描边颜色 */
            --button-border: #333;
            --button-text: #333;
            --button-keys: #e8e8e8;
            --button-hover-bg: #333;
            --button-hover-text: #fff;
            
            /* 动画过渡效果 */
            --transition-time: 0.5s;
        }
        
        /* 黑夜模式 */
        html[data-theme='dark'] {
            --primary-color: #61dafb;
            --primary-color-rgb: 97, 218, 251;
            --secondary-color: #a0a0a0;
            --accent-color: #ff6b6b;
            --background-color: #1a1a1a;
            --text-color: #e0e0e0;
            --navbar-bg: #252525;
            --card-bg: #252525;
            --border-color: #444;
            --box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            --placeholder-bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            --code-bg: #2d2d2d;
            --card-highlight: #b19cd9; /* 黑暗模式下更浅的紫色描边 */
            --button-border: #e0e0e0;
            --button-text: #e0e0e0;
            --button-keys: #444;
            --button-hover-bg: #e0e0e0;
            --button-hover-text: #1a1a1a;
        }
        
        /* 导航栏中的花式按钮 */
        .fancy {
            background-color: transparent;
            border: 2px solid var(--button-border);
            border-radius: 0;
            box-sizing: border-box;
            color: var(--button-text);
            cursor: pointer;
            display: inline-block;
            font-weight: 600;
            letter-spacing: 0.05em;
            margin: 0;
            outline: none;
            overflow: visible;
            padding: 0.6em 1em;
            position: relative;
            text-align: center;
            text-decoration: none;
            text-transform: none;
            transition: all 0.3s ease-in-out;
            user-select: none;
            font-size: 13px;
        }

        .fancy::before {
            content: " ";
            width: 0.8rem;
            height: 2px;
            background: var(--button-border);
            top: 50%;
            left: 0.5em;
            position: absolute;
            transform: translateY(-50%);
            transform-origin: center;
            transition: background 0.3s linear, width 0.3s linear;
        }

        .fancy .text {
            font-size: 0.9em;
            line-height: 1.33333em;
            padding-left: 1.2em;
            display: block;
            text-align: left;
            transition: all 0.3s ease-in-out;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--button-text);
        }

        .fancy .top-key {
            height: 2px;
            width: 0.8rem;
            top: -2px;
            left: 0.3rem;
            position: absolute;
            background: var(--button-keys);
            transition: width 0.5s ease-out, left 0.3s ease-out;
        }

        .fancy .bottom-key-1 {
            height: 2px;
            width: 0.8rem;
            right: 1.3rem;
            bottom: -2px;
            position: absolute;
            background: var(--button-keys);
            transition: width 0.5s ease-out, right 0.3s ease-out;
        }

        .fancy .bottom-key-2 {
            height: 2px;
            width: 0.4rem;
            right: 0.3rem;
            bottom: -2px;
            position: absolute;
            background: var(--button-keys);
            transition: width 0.5s ease-out, right 0.3s ease-out;
        }

        .fancy:hover {
            color: var(--button-hover-text);
            background: var(--button-hover-bg);
        }

        .fancy:hover::before {
            width: 0.6rem;
            background: var(--button-hover-text);
        }

        .fancy:hover .text {
            color: var(--button-hover-text);
            padding-left: 0.8em;
        }

        .fancy:hover .top-key {
            left: -2px;
            width: 0px;
        }

        .fancy:hover .bottom-key-1,
        .fancy:hover .bottom-key-2 {
            right: 0;
            width: 0;
        }
        
        /* 主题切换器样式 */
        .switch {
          font-size: 17px;
          position: relative;
          display: inline-block;
          width: 64px;
          height: 34px;
        }

        .switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #73C0FC;
          transition: .4s;
          border-radius: 30px;
        }

        .slider:before {
          position: absolute;
          content: "";
          height: 30px;
          width: 30px;
          border-radius: 20px;
          left: 2px;
          bottom: 2px;
          z-index: 2;
          background-color: #e8e8e8;
          transition: .4s;
        }

        .sun svg {
          position: absolute;
          top: 6px;
          left: 36px;
          z-index: 1;
          width: 24px;
          height: 24px;
        }

        .moon svg {
          fill: #73C0FC;
          position: absolute;
          top: 5px;
          left: 5px;
          z-index: 1;
          width: 24px;
          height: 24px;
        }

        .sun svg {
          animation: rotate 15s linear infinite;
        }

        @keyframes rotate {
         
          0% {
            transform: rotate(0);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        .moon svg {
          animation: tilt 5s linear infinite;
        }

        @keyframes tilt {
         
          0% {
            transform: rotate(0deg);
          }

          25% {
            transform: rotate(-10deg);
          }

          75% {
            transform: rotate(10deg);
          }

          100% {
            transform: rotate(0deg);
          }
        }

        .input:checked + .slider {
          background-color: #183153;
        }

        .input:focus + .slider {
          box-shadow: 0 0 1px #183153;
        }

        .input:checked + .slider:before {
          transform: translateX(30px);
        }
        
        /* 导航栏中的主题切换器 */
        .theme-toggle {
            margin-left: 1rem;
            display: flex;
            align-items: center;
        }
        
        /* 舞台灯光效果文字 */
        .shine-text {
            font-family: CustomKaiFont, "KaiTi", "楷体", "STXingkai", "华文行楷", "Microsoft YaHei", "Noto Serif SC", serif !important;
            font-size: 1.8rem;
            font-weight: bold;
            background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat;
            background: linear-gradient(to right, #0f0, #00f) 0 0 no-repeat;
            -webkit-background-size: 160px;
            background-size: 160px;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
            color: transparent;
            -webkit-animation: shine 3s infinite;
            animation: shine 3s infinite;
        }
        
        /* 添加主页标题样式 */
        .home-title {
            font-family: CustomHupoFont, "SimHei", "黑体", "STHupo", "华文琥珀", "Microsoft YaHei", "Noto Serif SC", serif !important;
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary-color);
            text-align: center;
            margin: 2rem 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        html[data-theme='dark'] .shine-text {
            -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
        }
        
        @-webkit-keyframes shine {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 100% 100%;
            }
        }
        
        @keyframes shine {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 100% 100%;
            }
        }
        
        /* 页面加载动画样式 */
        .page-loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--navbar-bg);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease;
        }
        
        .loader-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .loader-text {
            margin-top: 20px;
            font-family: Arial, sans-serif;
            color: #2f3545;
            font-size: 16px;
            letter-spacing: 1px;
        }
        
        .loader-animation {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .loader {
            display: inline-block;
            margin: 0 16px;
            --path: #2f3545;
            --dot: #5628ee;
            --duration: 3s;
            width: 44px;
            height: 44px;
            position: relative;
        }
        
        html[data-theme='dark'] .loader-text {
            color: #e0e0e0;
        }
        
        html[data-theme='dark'] .loader {
            --path: #f0f0f0;
            --dot: #61dafb;
        }
        
        .loader:before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: absolute;
            display: block;
            background: var(--dot);
            top: 37px;
            left: 19px;
            transform: translate(-18px, -18px);
            animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }
        
        .loader svg {
            display: block;
            width: 100%;
            height: 100%;
        }
        
        .loader svg rect,
        .loader svg polygon,
        .loader svg circle {
            fill: none;
            stroke: var(--path);
            stroke-width: 10px;
            stroke-linejoin: round;
            stroke-linecap: round;
        }
        
        .loader svg polygon {
            stroke-dasharray: 145 76 145 76;
            stroke-dashoffset: 0;
            animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }
        
        .loader svg rect {
            stroke-dasharray: 192 64 192 64;
            stroke-dashoffset: 0;
            animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }
        
        .loader svg circle {
            stroke-dasharray: 150 50 150 50;
            stroke-dashoffset: 75;
            animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }
        
        .loader.triangle {
            width: 48px;
        }
        
        .loader.triangle:before {
            left: 21px;
            transform: translate(-10px, -18px);
            animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }
        
        @keyframes pathTriangle {
            33% {
                stroke-dashoffset: 74;
            }
            
            66% {
                stroke-dashoffset: 147;
            }
            
            100% {
                stroke-dashoffset: 221;
            }
        }
        
        @keyframes dotTriangle {
            33% {
                transform: translate(0, 0);
            }
            
            66% {
                transform: translate(10px, -18px);
            }
            
            100% {
                transform: translate(-10px, -18px);
            }
        }
        
        @keyframes pathRect {
            25% {
                stroke-dashoffset: 64;
            }
            
            50% {
                stroke-dashoffset: 128;
            }
            
            75% {
                stroke-dashoffset: 192;
            }
            
            100% {
                stroke-dashoffset: 256;
            }
        }
        
        @keyframes dotRect {
            25% {
                transform: translate(0, 0);
            }
            
            50% {
                transform: translate(18px, -18px);
            }
            
            75% {
                transform: translate(0, -36px);
            }
            
            100% {
                transform: translate(-18px, -18px);
            }
        }
        
        @keyframes pathCircle {
            25% {
                stroke-dashoffset: 125;
            }
            
            50% {
                stroke-dashoffset: 175;
            }
            
            75% {
                stroke-dashoffset: 225;
            }
            
            100% {
                stroke-dashoffset: 275;
            }
        }
        
        /* 其他基本样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--background-color);
            margin: 0;
            padding: 0;
            transition: color var(--transition-time), background-color var(--transition-time);
        }
        
        a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color var(--transition-time);
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }
        
        .navbar {
            background-color: var(--navbar-bg);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: clamp(0.5rem, 2vw, 1rem);
            transition: background-color var(--transition-time), box-shadow var(--transition-time);
            width: 100%;
        }
        
        .navbar-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .navbar-brand {
            font-size: clamp(1rem, 3vw, 1.5rem);
            font-weight: bold;
            color: var(--primary-color);
            text-decoration: none;
            transition: color var(--transition-time);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: clamp(100px, 30vw, 300px);
        }
        
        .navbar-nav {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(0.2rem, 1vw, 1rem);
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: center;
        }
        
        .nav-item {
            margin-left: 0;
        }
        
        .nav-welcome {
            margin-left: 1rem;
        }
        
        .nav-link {
            color: var(--text-color);
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: clamp(0.8rem, 2.5vw, 1rem);
            padding: clamp(0.3rem, 1vw, 0.8rem) clamp(0.5rem, 1.5vw, 1rem);
            white-space: nowrap;
        }
        
        .nav-link:hover {
            color: var(--primary-color);
        }
        
        .flash-messages {
            max-width: 1200px;
            margin: 1rem auto;
            padding: 0 1rem;
        }
        
        .flash-message {
            padding: 0.8rem 1rem;
            margin-bottom: 1rem;
            border-radius: 4px;
            transition: background-color var(--transition-time), color var(--transition-time), border var(--transition-time);
        }
        
        .flash-message.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .flash-message.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .btn {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: #fff;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
            text-decoration: none;
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        .form-control {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .error-message {
            color: var(--accent-color);
            font-size: 0.9rem;
            margin-top: 0.25rem;
        }
        
        footer {
            margin-top: 2rem;
            padding: 2rem 0;
            background-color: var(--navbar-bg);
            border-top: 1px solid var(--border-color);
            text-align: center;
            color: var(--secondary-color);
            transition: background-color var(--transition-time), border-top var(--transition-time);
        }
        
        .user-info {
            color: var(--secondary-color);
            font-size: 0.9rem;
            padding: 0.5rem 0;
            display: inline-block;
            transition: color var(--transition-time);
        }
        
        /* 导航栏自适应样式 */
        .navbar {
            width: 100%;
            padding: clamp(0.5rem, 2vw, 1rem);
            box-sizing: border-box;
        }
        
        .navbar-brand {
            font-size: clamp(1rem, 3vw, 1.5rem);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: clamp(100px, 30vw, 300px);
        }
        
        .navbar-nav {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(0.2rem, 1vw, 1rem);
        }
        
        .nav-link {
            font-size: clamp(0.8rem, 2.5vw, 1rem);
            padding: clamp(0.3rem, 1vw, 0.8rem) clamp(0.5rem, 1.5vw, 1rem);
            white-space: nowrap;
        }
        
        .dropdown-menu {
            min-width: fit-content;
            max-width: 90vw;
        }
        
        .dropdown-item {
            font-size: clamp(0.8rem, 2.5vw, 1rem);
            padding: clamp(0.3rem, 1vw, 0.6rem) clamp(0.7rem, 1.5vw, 1.2rem);
            white-space: normal;
            word-break: break-word;
        }
        
        /* 小屏幕上的汉堡菜单按钮调整 */
        .navbar-toggler {
            padding: clamp(0.25rem, 1vw, 0.75rem);
            font-size: clamp(0.8rem, 2.5vw, 1.25rem);
        }
        
        @media screen and (max-width: 767px) {
            .navbar-collapse {
                max-height: 80vh;
                overflow-y: auto;
            }
            
            .navbar-nav {
                margin-top: 0.5rem;
                width: 100%;
            }
            
            .nav-item {
                width: 100%;
            }
            
            .dropdown-menu {
                position: static !important;
                width: calc(100% - 20px);
                margin-left: 10px;
                box-shadow: none;
                border-radius: 0;
            }
        }
        
        /* 汉堡菜单按钮样式 */
        .hamburger {
          height: 50px;
          width: 50px;
          transform: 0.2s;
          position: relative;
          display: none; /* 默认隐藏 */
        }
        .hamburger .checkbox {
          position: absolute;
          opacity: 0;
          height: 100%;
          width: 100%;
          cursor: pointer;
          z-index: 10;
        }
        .line {
          transition: 0.5s;
          stroke-width: 6px;
          stroke: var(--text-color);
        }
        .lineTop {
          stroke-dasharray: 40 40;
          stroke-dashoffset: 25;
        }
        .lineBottom {
          stroke-dasharray: 40 40;
          stroke-dashoffset: 60;
        }
        .lineMid {
          stroke-dasharray: 40 40;
        }
        .hamburger .checkbox:checked + svg .line {
          stroke: var(--primary-color);
        }
        .hamburger .checkbox:checked + svg .lineTop {
          stroke-dashoffset: 0;
          transform-origin: left;
          transform: rotateZ(45deg) translate(-7px, -5px);
        }
        .hamburger .checkbox:checked + svg .lineMid {
          stroke-dashoffset: 40;
        }
        .hamburger .checkbox:checked + svg .lineBottom {
          stroke-dashoffset: 0;
          transform-origin: left;
          transform: rotateZ(-45deg) translate(-5px, 5px);
        }

        /* 移除旧的菜单样式 */
        .menu-toggle {
            display: none;
        }

        /* 响应式设计 */
        @media screen and (max-width: 960px) {
            .hamburger {
                display: block; /* 在小屏幕上显示菜单按钮 */
            }
            
            .navbar-container {
                position: relative;
            }
            
            .navbar-nav {
                position: absolute;
                flex-direction: column;
                align-items: flex-start;
                top: 100%;
                right: 0;
                background-color: var(--navbar-bg);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                width: 250px;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
                z-index: 99;
                padding: 0;
                border-radius: 0 0 4px 4px;
            }
            
            .navbar-nav.show {
                max-height: 500px; /* 足够高以容纳所有菜单项 */
                padding: 1rem 0;
                overflow-y: auto;
            }
            
            .nav-item {
                width: 100%;
                margin: 0.5rem 0;
                padding: 0 1rem;
            }
            
            .fancy {
                width: 100%;
            }
            
            /* 主题切换按钮样式调整 */
            .theme-toggle {
                margin: 0.5rem 1rem;
            }
        }

        /* 通知样式 */
        .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .notification-card {
            width: 330px;
            height: 80px;
            border-radius: 8px;
            box-sizing: border-box;
            padding: 10px 15px;
            background-color: #ffffff;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-around;
            gap: 15px;
            animation: slideIn 0.5s ease forwards;
            opacity: 0;
            transform: translateX(100%);
        }
        
        .notification-wave {
            position: absolute;
            transform: rotate(90deg);
            left: -31px;
            top: 32px;
            width: 80px;
            fill: #04e4003a;
        }
        
        .notification-icon-container {
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #04e40048;
            border-radius: 50%;
            margin-left: 8px;
        }
        
        .notification-icon {
            width: 17px;
            height: 17px;
            color: #269b24;
        }
        
        .notification-message-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            flex-grow: 1;
        }
        
        .notification-message, .notification-subtext {
            margin: 0;
            cursor: default;
        }
        
        .notification-message {
            color: #269b24;
            font-size: 17px;
            font-weight: 700;
        }
        
        .notification-subtext {
            font-size: 14px;
            color: #555;
        }
        
        .notification-close {
            width: 18px;
            height: 18px;
            color: #555;
            cursor: pointer;
        }
        
        /* 成功通知 */
        .notification-card.success .notification-wave {
            fill: #04e4003a;
        }
        
        .notification-card.success .notification-icon-container {
            background-color: #04e40048;
        }
        
        .notification-card.success .notification-icon {
            color: #269b24;
        }
        
        .notification-card.success .notification-message {
            color: #269b24;
        }
        
        /* 错误通知 */
        .notification-card.error .notification-wave {
            fill: #fc0c0c3a;
        }
        
        .notification-card.error .notification-icon-container {
            background-color: #fc0c0c48;
        }
        
        .notification-card.error .notification-icon {
            color: #d10d0d;
        }
        
        .notification-card.error .notification-message {
            color: #d10d0d;
        }
        
        /* 警告通知 */
        .notification-card.warning .notification-wave {
            fill: #ffc4003a;
        }
        
        .notification-card.warning .notification-icon-container {
            background-color: #ffc40048;
        }
        
        .notification-card.warning .notification-icon {
            color: #f57c00;
        }
        
        .notification-card.warning .notification-message {
            color: #f57c00;
        }

        /* 动画效果 */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(100%);
            }
        }
    </style>
    {% block extra_head %}{% endblock %}
</head>
<body>
    <!-- 页面加载动画 -->
    <div class="page-loader-wrapper" id="pageLoader">
        <div class="loader-container">
            <div class="loader-animation">
                <div class="loader">
                    <svg viewBox="0 0 80 80">
                        <circle r="32" cy="40" cx="40" id="test"></circle>
                    </svg>
                </div>
                
                <div class="loader triangle">
                    <svg viewBox="0 0 86 80">
                        <polygon points="43 8 79 72 7 72"></polygon>
                    </svg>
                </div>
                
                <div class="loader">
                    <svg viewBox="0 0 80 80">
                        <rect height="64" width="64" y="8" x="8"></rect>
                    </svg>
                </div>
            </div>
            <div class="loader-text">加载中...</div>
        </div>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="{{ url_for('index') }}" class="navbar-brand shine-text">云水禅心居</a>
            
            <!-- 添加新的汉堡菜单按钮 -->
            <div class="hamburger" id="menuToggle">
              <input class="checkbox" type="checkbox" />
              <svg fill="none" viewBox="0 0 50 50" height="50" width="50">
                <path
                  class="lineTop line"
                  stroke-linecap="round"
                  stroke-width="4"
                  stroke="var(--text-color)"
                  d="M6 11L44 11"
                ></path>
                <path
                  stroke-linecap="round"
                  stroke-width="4"
                  stroke="var(--text-color)"
                  d="M6 24H43"
                  class="lineMid line"
                ></path>
                <path
                  stroke-linecap="round"
                  stroke-width="4"
                  stroke="var(--text-color)"
                  d="M6 37H43"
                  class="lineBottom line"
                ></path>
              </svg>
            </div>
            
            <ul class="navbar-nav" id="navbarNav">
                <li class="nav-item">
                    <a href="{{ url_for('index') }}" class="fancy">
                        <span class="top-key"></span>
                        <span class="text">🏠 首页</span>
                        <span class="bottom-key-1"></span>
                        <span class="bottom-key-2"></span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('verify') }}" class="fancy">
                        <span class="top-key"></span>
                        <span class="text">🔧 后台管理</span>
                        <span class="bottom-key-1"></span>
                        <span class="bottom-key-2"></span>
                    </a>
                </li>
                {% if current_user.is_authenticated %}
                    <li class="nav-item">
                        <a href="{{ url_for('write_post') }}" class="fancy">
                            <span class="top-key"></span>
                            <span class="text">✍️ 写作</span>
                            <span class="bottom-key-1"></span>
                            <span class="bottom-key-2"></span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url_for('profile') }}" class="fancy">
                            <span class="top-key"></span>
                            <span class="text">👤 个人中心</span>
                            <span class="bottom-key-1"></span>
                            <span class="bottom-key-2"></span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url_for('logout') }}" class="fancy">
                            <span class="top-key"></span>
                            <span class="text">🚪 退出</span>
                            <span class="bottom-key-1"></span>
                            <span class="bottom-key-2"></span>
                        </a>
                    </li>
                    <li class="nav-item nav-welcome">
                        <span class="user-info">欢迎, {{ current_user.username }}</span>
                    </li>
                {% else %}
                    <li class="nav-item">
                        <a href="{{ url_for('login') }}" class="fancy">
                            <span class="top-key"></span>
                            <span class="text">🔑 登录</span>
                            <span class="bottom-key-1"></span>
                            <span class="bottom-key-2"></span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url_for('register') }}" class="fancy">
                            <span class="top-key"></span>
                            <span class="text">📝 注册</span>
                            <span class="bottom-key-1"></span>
                            <span class="bottom-key-2"></span>
                        </a>
                    </li>
                {% endif %}
                <li class="nav-item theme-toggle">
                    <label class="switch">
                      <span class="sun"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="#ffd43b"><circle r="5" cy="12" cx="12"></circle><path d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z"></path></g></svg></span>
                      <span class="moon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg></span>   
                      <input type="checkbox" class="input" id="themeToggle">
                      <span class="slider"></span>
                    </label>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 提示消息 -->
    <div id="notification-container" class="notification-container">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="notification-card {{ category }}">
                        <svg class="notification-wave" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0,256L11.4,240C22.9,224,46,192,69,192C91.4,192,114,224,137,234.7C160,245,183,235,206,213.3C228.6,192,251,160,274,149.3C297.1,139,320,149,343,181.3C365.7,213,389,267,411,282.7C434.3,299,457,277,480,250.7C502.9,224,526,192,549,181.3C571.4,171,594,181,617,208C640,235,663,277,686,256C708.6,235,731,149,754,122.7C777.1,96,800,128,823,165.3C845.7,203,869,245,891,224C914.3,203,937,117,960,112C982.9,107,1006,181,1029,197.3C1051.4,213,1074,171,1097,144C1120,117,1143,107,1166,133.3C1188.6,160,1211,224,1234,218.7C1257.1,213,1280,139,1303,133.3C1325.7,128,1349,192,1371,192C1394.3,192,1417,128,1429,96L1440,64L1440,320L1428.6,320C1417.1,320,1394,320,1371,320C1348.6,320,1326,320,1303,320C1280,320,1257,320,1234,320C1211.4,320,1189,320,1166,320C1142.9,320,1120,320,1097,320C1074.3,320,1051,320,1029,320C1005.7,320,983,320,960,320C937.1,320,914,320,891,320C868.6,320,846,320,823,320C800,320,777,320,754,320C731.4,320,709,320,686,320C662.9,320,640,320,617,320C594.3,320,571,320,549,320C525.7,320,503,320,480,320C457.1,320,434,320,411,320C388.6,320,366,320,343,320C320,320,297,320,274,320C251.4,320,229,320,206,320C182.9,320,160,320,137,320C114.3,320,91,320,69,320C45.7,320,23,320,11,320L0,320Z" fill-opacity="1"></path>
                        </svg>
                        <div class="notification-icon-container">
                            {% if category == 'error' %}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" stroke-width="0" fill="currentColor" stroke="currentColor" class="notification-icon">
                                <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path>
                            </svg>
                            {% else %}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" stroke-width="0" fill="currentColor" stroke="currentColor" class="notification-icon">
                                <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"></path>
                            </svg>
                            {% endif %}
                        </div>
                        <div class="notification-message-container">
                            <p class="notification-message">{{ message }}</p>
                            <p class="notification-subtext">{% if category == 'success' %}操作成功完成{% elif category == 'error' %}请检查并重试{% else %}请注意此消息{% endif %}</p>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke-width="0" fill="none" stroke="currentColor" class="notification-close">
                            <path fill="currentColor" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" clip-rule="evenodd" fill-rule="evenodd"></path>
                        </svg>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>

    <!-- 主内容区 -->
    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025-2026 云水禅心居. 保留所有权利.</p>
        </div>
    </footer>

    <!-- 脚本区 -->
    <script>
        // 主题切换功能
        document.addEventListener('DOMContentLoaded', function() {
            // 获取主题切换按钮
            const themeToggle = document.getElementById('themeToggle');
            
            // 从本地存储中获取当前主题
            const currentTheme = localStorage.getItem('theme');
            
            // 如果已有主题，应用它
            if (currentTheme) {
                document.documentElement.setAttribute('data-theme', currentTheme);
                
                // 如果是暗色主题，确保切换按钮呈现为选中状态
                if (currentTheme === 'dark') {
                    themeToggle.checked = true;
                }
            }
            
            // 监听切换按钮的变化
            themeToggle.addEventListener('change', function() {
                if (this.checked) {
                    // 切换到暗黑模式
                    document.documentElement.setAttribute('data-theme', 'dark');
                    localStorage.setItem('theme', 'dark');
                } else {
                    // 切换到亮色模式
                    document.documentElement.setAttribute('data-theme', 'light');
                    localStorage.setItem('theme', 'light');
                }
            });
        });
        
        // 页面加载完成后隐藏加载动画
        window.addEventListener('load', function() {
            // 检测页面URL，对于写作页面，让全局加载动画保持更长时间
            var isWritePage = window.location.pathname.includes('/write');
            var timeToHide = isWritePage ? 100 : 800; // 写作页面使用更短的延迟，因为有单独的编辑器加载
            
            setTimeout(function() {
                var loader = document.getElementById('pageLoader');
                if (loader) {
                    loader.style.opacity = '0';
                    setTimeout(function() {
                        loader.style.display = 'none';
                    }, 500);
                }
            }, timeToHide);
        });
    </script>
    
    <!-- 添加懒加载脚本 -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

            if ("IntersectionObserver" in window) {
                let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            lazyImage.src = lazyImage.dataset.src;
                            lazyImage.classList.remove("lazy");
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });

                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            } else {
                // 回退到更简单的方法
                let active = false;

                const lazyLoad = function() {
                    if (active === false) {
                        active = true;

                        setTimeout(function() {
                            lazyImages.forEach(function(lazyImage) {
                                if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                                    lazyImage.src = lazyImage.dataset.src;
                                    lazyImage.classList.remove("lazy");

                                    lazyImages = lazyImages.filter(function(image) {
                                        return image !== lazyImage;
                                    });

                                    if (lazyImages.length === 0) {
                                        document.removeEventListener("scroll", lazyLoad);
                                        window.removeEventListener("resize", lazyLoad);
                                        window.removeEventListener("orientationchange", lazyLoad);
                                    }
                                }
                            });

                            active = false;
                        }, 200);
                    }
                };

                document.addEventListener("scroll", lazyLoad);
                window.addEventListener("resize", lazyLoad);
                window.addEventListener("orientationchange", lazyLoad);
                lazyLoad();
            }
        });
    </script>
    
    <!-- 添加菜单按钮功能 -->
    <script>
        // 添加菜单按钮功能
        document.addEventListener('DOMContentLoaded', function() {
            // 菜单切换按钮功能
            const menuToggle = document.getElementById('menuToggle');
            const menuCheckbox = document.querySelector('.hamburger .checkbox');
            const navbarNav = document.getElementById('navbarNav');
            
            // 如果存在菜单按钮
            if (menuToggle) {
                menuCheckbox.addEventListener('change', function() {
                    // 切换导航菜单的显示状态
                    navbarNav.classList.toggle('show');
                });
                
                // 点击菜单项后自动关闭菜单
                const navItems = document.querySelectorAll('.nav-item a');
                navItems.forEach(item => {
                    item.addEventListener('click', function() {
                        // 仅在移动视图下运行
                        if (window.innerWidth <= 960) {
                            menuCheckbox.checked = false;
                            navbarNav.classList.remove('show');
                        }
                    });
                });
                
                // 点击菜单外区域关闭菜单
                document.addEventListener('click', function(event) {
                    // 仅在移动视图下运行
                    if (window.innerWidth <= 960) {
                        // 检查点击是否在菜单外
                        if (!navbarNav.contains(event.target) && !menuToggle.contains(event.target)) {
                            menuCheckbox.checked = false;
                            navbarNav.classList.remove('show');
                        }
                    }
                });
                
                // 监听窗口大小变化，在切换到桌面视图时隐藏菜单
                window.addEventListener('resize', function() {
                    if (window.innerWidth > 960) {
                        menuCheckbox.checked = false;
                        navbarNav.classList.remove('show');
                    }
                });
            }
        });
    </script>

    <!-- 通知管理 -->
    <script>
        // 通知管理
        document.addEventListener('DOMContentLoaded', function() {
            const notifications = document.querySelectorAll('.notification-card');
            
            notifications.forEach(notification => {
                // 获取关闭按钮
                const closeBtn = notification.querySelector('.notification-close');
                
                // 添加关闭按钮点击事件
                closeBtn.addEventListener('click', function() {
                    closeNotification(notification);
                });
                
                // 3秒后自动关闭
                setTimeout(() => {
                    closeNotification(notification);
                }, 3000);
            });
            
            // 关闭通知函数
            function closeNotification(notification) {
                notification.style.animation = 'slideOut 0.5s ease forwards';
                
                // 动画结束后移除通知
                setTimeout(() => {
                    notification.remove();
                }, 500);
            }
        });
    </script>
    {% block scripts %}{% endblock %}
    
    <!-- 配置播放器 -->
    <div id="xf-MusicPlayer" data-cdnName="https://player.xfyun.club/js" data-themeColor="xf-girlPink" data-fadeOutAutoplay data-memory="1" style="position: fixed; bottom: 10px; right: 10px; z-index: 999;"></div>

    <!-- 引入外部CDN插件 -->
    <script src="https://player.xfyun.club/js/xf-MusicPlayer/js/xf-MusicPlayer.min.js"></script>
    <script src="https://player.xfyun.club/js/yinghua.js"></script>
    
    <!-- 音乐播放器状态管理 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 等待播放器加载完成
            const checkPlayer = setInterval(() => {
                if (window.xfMusicPlayer) {
                    clearInterval(checkPlayer);
                    
                    // 从localStorage恢复播放状态
                    const savedState = localStorage.getItem('musicPlayerState');
                    if (savedState) {
                        const state = JSON.parse(savedState);
                        if (state.isPlaying) {
                            window.xfMusicPlayer.play();
                        }
                        if (state.currentTime) {
                            window.xfMusicPlayer.seek(state.currentTime);
                        }
                    }
                    
                    // 监听播放器状态变化
                    window.xfMusicPlayer.on('play', () => {
                        savePlayerState(true);
                    });
                    
                    window.xfMusicPlayer.on('pause', () => {
                        savePlayerState(false);
                    });
                    
                    window.xfMusicPlayer.on('timeupdate', () => {
                        savePlayerState(window.xfMusicPlayer.isPlaying());
                    });
                }
            }, 100);
            
            // 保存播放器状态
            function savePlayerState(isPlaying) {
                const state = {
                    isPlaying: isPlaying,
                    currentTime: window.xfMusicPlayer ? window.xfMusicPlayer.getCurrentTime() : 0
                };
                localStorage.setItem('musicPlayerState', JSON.stringify(state));
            }
            
            // 页面卸载前保存状态
            window.addEventListener('beforeunload', () => {
                if (window.xfMusicPlayer) {
                    savePlayerState(window.xfMusicPlayer.isPlaying());
                }
            });
        });
    </script>
</body>
</html> 